<template>
    <div>
        <span>{{codeValue}}</span>
    </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
    data() {
        return {
            validCode: true,
            codeValue: "获取验证码"
        };
    },
    props: ["phone", "phoneArea"],
    methods: {
        //获取验证码
        getCodeChild() {
            var that = this;
            var checkPhone = /^[0-9]*$/; //数字验证
            if (that.phone == "") {
                Toast({ message: "手机号不能为空！" });
                return false;
            }
            if (!checkPhone.test(that.phone)) {
                Toast({ message: "请输入正确的手机格式！" });
                return false;
            }
            if (!that.phoneArea) {
                Toast({ message: "区号不能为空！" });
                return false;
            }
            var params = {
                phoneNo: that.phone,
                areaNo: that.phoneArea,
                type: "0"
            };
            if (that.validCode == true) {
                that.getCode(params);
                that.validCode = false;
                var newNum = 60;
                var timer = setInterval(function() {
                    newNum--;
                    //console.log(newNum);
                    that.codeValue = newNum;
                    // 调用code
                    if (newNum <= 0) {
                        clearInterval(timer);
                        that.codeValue = "获取验证码";
                        that.validCode = true;
                    }
                }, 1000);
            }
        },
        //获取验证码
        getCode(params) {
            this.$axios
                .get(this.address.sendCode, {
                    params: params
                })
                .then(res => {
                    if(res.data.code == 200){
                        Toast({ message: "发送成功！" });
                    }else{
                        Toast({ message: "发送失败！" });
                    }
                    console.log(res.data);
                })
                .catch(error => {
                    console.log(error);
                });
        }
    }
};
</script>
<style lang="less" scoped>
</style>
